<style lang="less">
    @import './index.less';
</style>

<template>
    <div>
        <Row :gutter="10">
            <i-col span="24">
            <div class="page-content">
                <Row style="height: 24px;line-height: 24px;margin-bottom: 10px;">
                    <i-col>
                    <Input v-model="searchKey" placeholder="关键字" style="width: 100px;" size="small"></Input>
                    <Button type="primary" size="small">
                        <Icon type="search"/>
                        查询
                    </Button>
                    <Button type="primary" size="small" class="pull-right" @click="addModal=!addModal">
                        <Icon type="plus"/>
                        增加
                    </Button>
                    <Dropdown style="margin-right: 10px" v-show="selection.length" trigger="click"
                              class="pull-right">
                        <Button type="default" size="small">
                            批次执行...
                            <Icon type="arrow-down-b"></Icon>
                        </Button>
                        <DropdownMenu slot="list">
                            <DropdownItem>
                                <Icon type="close"/>
                                删除
                            </DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    </i-col>
                </Row>
                <Table border
                       highlight-row
                       :context="self"
                       :loading="tableLoading"
                       :columns="tableColumn"
                       :data="tableData"
                       @on-selection-change="appTableSelectionChange"
                       @on-current-change="appTableRowChange">

                </Table>
                <div style="display: block;padding-top: 10px;text-align: right">
                    <Page :total="tableData.length" size="small" show-elevator show-sizer></Page>
                </div>
            </div>
            </i-col>

        </Row>
        <Modal
                title="增加客户端"
                v-model="addModal"
                @on-ok="addAppSave"
                @on-cancel="addAppCancel"
                :loading="true"
                :mask-closable="false">

        </Modal>
    </div>
</template>

<script>
  import column from './column';
  export default {
    data () {
      return {
        self: this,
        searchKey: '',
        addModal: false,
        tableLoading: false,
        tableData: [],
        tableColumn: column,
        selection: []
      };
    },
    methods: {
      addAppSave () {
        setTimeout(() => {
          this.addModal = false;
        }, 2000);
      },
      addAppCancel () {
      },
      load () {
        let self = this;
        this.$http.get('/sys/apps')
          .then(
            (res) => {
              res.data[0]._highlight = true;
              self.tableData = res.data;
              self.appTableRowChange(res.data[0], null);
            })
          .catch(
            (err) => {
              this.$Message.error(err.message);
            });
      },
      appTableSelectionChange (selection) {
        this.selection = selection;
      },
      appTableRowChange (row, oldRow) {
      }
    },
    components: {},
    computed: {},
    watch: {},
    mounted () {
      this.load();
    }
  };
</script>
